import React from 'react';
import { Image, Avatar } from 'antd';

interface ChatMessageProps {
    content: string;
    type: 'text' | 'image';
    sender: 'user' | 'expert';
}

const ChatMessage: React.FC<ChatMessageProps> = ({ content, type, sender }) => {
    const avatarSrc = sender === 'user' ? '/user-avatar.svg' : '/expert-avatar.svg';

    return (
        <div className={`message-wrapper ${sender}`}>
            <Avatar
                src={avatarSrc}
                size={40}
                className="avatar"
                alt={sender === 'user' ? '用户' : '专家'}
            />
            <div className={`message w-full ${sender}`}>
                {type === 'text' ? (
                    <p>{content}</p>
                ) : (
                    <Image
                        src={content}
                        width={200}
                        alt="Disease Image"
                        preview={{
                            mask: '查看大图'
                        }}
                    />
                )}
            </div>
        </div>
    );
};

export default ChatMessage;